<template>
  <el-scrollbar>
    <div class="demo-collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <img
          src="https://pic2.zhimg.com/v2-fa7731d3016a7a79d5395504ed3eee5d_r.jpg"
          class="image"
        />
        <div>{{ title }}</div>

        <el-collapse-item title="基本特征" name="1">
          <div>{{ feature1 }}</div>
          <div>{{ feature2 }}</div>
          <div>{{ feature3 }}</div>
          <div>{{ feature4 }}</div>
          <div>{{ feature5 }}</div>
          <div>{{ feature6 }}</div>
          <div>{{ feature7 }}</div>
        </el-collapse-item>

        <el-collapse-item title="行为模式" name="2">
          <div>{{ behavior1 }}</div>
          <div>{{ behavior2 }}</div>
          <div>{{ behavior3 }}</div>
        </el-collapse-item>

        <el-collapse-item title="工作环境倾向性" name="3">
          <div>{{ trend1 }}</div>
          <div>{{ trend2 }}</div>
          <div>{{ trend3 }}</div>
          <div>{{ trend4 }}</div>
          <div>{{ trend5 }}</div>
          <div>{{ trend6 }}</div>
          <div>{{ trend7 }}</div>
        </el-collapse-item>

        <el-collapse-item title="潜在缺点" name="4">
          <div>{{ defect1 }}</div>
          <div>{{ defect2 }}</div>
          <div>{{ defect3 }}</div>
          <div>{{ defect4 }}</div>
        </el-collapse-item>

        <el-collapse-item title="发展建议" name="5">
          <div>{{ suggest1 }}</div>
          <div>{{ suggest2 }}</div>
          <div>{{ suggest3 }}</div>
          <div>{{ suggest4 }}</div>
          <div>{{ suggest5 }}</div>
          <div>{{ suggest6 }}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-row type="flex" justify="center">
      <el-col :span="1"> </el-col>
    </el-row>

    <el-row type="flex" justify="center">
      <el-form-item class="mb-4">
        <el-space :size="size" spacer="|">
          <el-button type="primary" plain @click="this.$router.push('/INTP')"
            >上一个</el-button
          >
          <el-button type="primary" plain @click="this.$router.push('/ENTP')"
            >下一个</el-button
          >
        </el-space>
      </el-form-item>
    </el-row>
  </el-scrollbar>
</template>

<script>
import { ref } from "vue";
import {
  ChatDotRound,
  ChatLineRound,
  ChatRound,
} from "@element-plus/icons-vue";
export default {
  name: "index",
  data() {
    return {
      title: "",
      feature1: "",
      feature2: "",
      feature3: "",
      feature4: "",
      feature5: "",
      feature6: "",
      feature7: "",
      behavior1: "",
      behavior2: "",
      behavior3: "",
      trend1: "",
      trend2: "",
      trend3: "",
      trend4: "",
      trend5: "",
      trend6: "",
      trend7: "",
      defect1: "",
      defect2: "",
      defect3: "",
      defect4: "",
      suggest1: "",
      suggest2: "",
      suggest3: "",
      suggest4: "",
      suggest5: "",
      suggest6: "",
    };
  },
  methods: {},
  created() {
    const that = this;
    this.$axios
      .get("/entj")
      .then(function (response) {
        // 处理成功情况
        that.title = response["data"]["entj"];
        that.feature1 = response["data"]["feature1"];
        that.feature2 = response["data"]["feature2"];
        that.feature3 = response["data"]["feature3"];
        that.feature4 = response["data"]["feature4"];
        that.feature5 = response["data"]["feature5"];
        that.feature6 = response["data"]["feature6"];
        that.feature7 = response["data"]["feature7"];
        that.behavior1 = response["data"]["behavior1"];
        that.behavior2 = response["data"]["behavior2"];
        that.behavior3 = response["data"]["behavior3"];
        that.trend1 = response["data"]["trend1"];
        that.trend2 = response["data"]["trend2"];
        that.trend3 = response["data"]["trend3"];
        that.trend4 = response["data"]["trend4"];
        that.trend5 = response["data"]["trend5"];
        that.trend6 = response["data"]["trend6"];
        that.trend7 = response["data"]["trend7"];
        that.defect1 = response["data"]["defect1"];
        that.defect2 = response["data"]["defect2"];
        that.defect3 = response["data"]["defect3"];
        that.defect4 = response["data"]["defect4"];
        that.suggest1 = response["data"]["suggest1"];
        that.suggest2 = response["data"]["suggest2"];
        that.suggest3 = response["data"]["suggest3"];
        that.suggest4 = response["data"]["suggest4"];
        that.suggest5 = response["data"]["suggest5"];
        that.suggest6 = response["data"]["suggest6"];
      })
      .catch(function (error) {
        // 处理错误情况
        console.log(error);
      })
      .then(function () {
        // 总是会执行
      });
  },
  setup() {
    const activeNames = ref([""]);
    const value = ref();
    const icons = [ChatRound, ChatLineRound, ChatDotRound];
    return { activeNames, value, icons };
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.image {
  width: 100%;
  display: block;
}
</style>
